
<?php
include("includes.php");
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Hookem</title>
    </head>
    <body>
        <div id="contenedor">

            <?php
            include("cabecera.php");
            ?>

            <!--...................PARTE IZQUIERDA...........................-->        
            <div class="cuerpo">
                <div class="cuerpoizq">

                    <!--.......................Registros...........................-->

                    <div id="divregistro"> 
                        <?php
                        if (isset($_SESSION['registroCorrecto'])) {
                            ?>
                            <div>
                                Revisa tu email para verificar tu cuenta
                            </div>

                            <?php
                            $_SESSION['registroCorrecto'] = null;
                        } else {
                            ?>
                            <ul id="errores">

                                <?php
                                if (isset($_SESSION['errorRegistro'])) {
                                    echo $_SESSION['errorRegistro'];
                                    $_SESSION['errorRegistro'] = null;
                                }
                                ?>


                            </ul>
                            <script type="text/javascript">
                                function comprobarregistro() {
                                    var errorcomprobacion = true;
                                    var errorli = document.getElementById("errores");
                                    while (errorli.childNodes.length > 0 )
                                    {
                                        errorli.removeChild(errorli.childNodes[0]);
                                    }

                                    var compusuario = document.getElementById("compusuario").value;
                                    var comppassword = document.getElementById("comppassword").value;
                                    var comppassword2 = document.getElementById("comppassword2").value;
                                    var compemail = document.getElementById("compemail").value;
                                    var compemail2 = document.getElementById("compemail2").value;


                                    if (compusuario.length < 4 || compusuario.length > 12) {
                                        var errorli = document.getElementById("errores");
                                        var crearli = document.createElement("li");
                                        crearli.setAttribute("class", "li-error");
                                        var textoerror = document.createTextNode("El usuario debe tener entre 4 y 12 caracteres");

                                        crearli.appendChild(textoerror);
                                        errorli.appendChild(crearli);

                                        errorcomprobacion = false;
                                    }

                                    if (comppassword.length < 6 || comppassword.length > 16) {
                                        var errorli = document.getElementById("errores");
                                        var crearli = document.createElement("li");
                                        crearli.setAttribute("class", "li-error");
                                        var textoerror = document.createTextNode("La contraseña debe tener entre 6 y 16 caracteres");

                                        crearli.appendChild(textoerror);
                                        errorli.appendChild(crearli);

                                        errorcomprobacion = false;
                                    }

                                    if (comppassword2 !== comppassword) {
                                        var errorli = document.getElementById("errores");
                                        var crearli = document.createElement("li");
                                        crearli.setAttribute("class", "li-error");
                                        var textoerror = document.createTextNode("Las contraseñas no coinciden");

                                        crearli.appendChild(textoerror);
                                        errorli.appendChild(crearli);

                                        errorcomprobacion = false;
                                    }

                                    if (compemail2 !== compemail) {
                                        var errorli = document.getElementById("errores");
                                        var crearli = document.createElement("li");
                                        crearli.setAttribute("class", "li-error");
                                        var textoerror = document.createTextNode("Los emails no coinciden");

                                        crearli.appendChild(textoerror);
                                        errorli.appendChild(crearli);

                                        errorcomprobacion = false;
                                    }

                                    return errorcomprobacion;
                                }
                            </script>

                            <div id="etiquetasRegistro">
                                <span id="etiquetaNombre">Nombre usuario</span><br>
                                <span class="etiqueta">Contraseña</span><br>
                                <span class="etiqueta">Repetir Contraseña</span><br>
                                <span class="etiqueta">Email</span><br>
                                <span class="etiqueta">Repetir Email</span><br>
                                <span class="etiqueta">Fecha de nacimiento</span><br>
                            </div>

                            <form id="formRegistro" action="registroUser.php" method="POST" onsubmit=" return comprobarregistro();">
                                <input id="compusuario" class="camposregistro" type="text" name="usuario" required autofocus> <br>
                                <input id="comppassword" class="camposregistro" type="password" name="password" required> <br>
                                <input id="comppassword2" class="camposregistro" type="password" name="password2" required><br>
                                <input id="compemail" class="camposregistro" type="email" name="email" required ><br>
                                <input id="compemail2" class="camposregistro" type="email" name="email2" required ><br>
                                <input class="camposregistro" type="date" name="fechanacimiento" required value="1990-01-01"><br>
                                <button class="camposregistro" type="submit">Registrar</button>
                                <button type="reset">Limpiar</button>
                            </form>

                            <div id="informacionregistro">
                                <div id="inforegistrouser">Entre 4 y 12 caracteres</div>
                                <div id="inforegistropass">Entre 6 y 16 caracteres</div>
                            </div>
                            <?php
                        }
                        ?>

                    </div>



                    <!--...........................................................-->
                </div>          
            </div>

            <!--....................PARTE DERECHA..........................-->
            <?php
            include("barraDerecha.php");
            ?>
        </div>
    </body>
</html>